/**
 * @ignore
 * color button.
 * @author yiminghe@gmail.com
 */

var Editor = require('editor');
var Button = require('../button');
var Overlay4E = require('../overlay');
var DialogLoader = require('../dialog-loader');

var $ = require('node');
var util = require('util');

var COLORS = [
    ['000', '444', '666', '999', 'CCC', 'EEE', 'F3F3F3', 'FFF'],
    ['F00', 'F90', 'FF0', '0F0', '0FF', '00F', '90F', 'F0F'],
    ['F4CC' + 'CC', 'FCE5CD', 'FFF2CC', 'D9EAD3', 'D0E0E3', 'CFE2F3', 'D9D2E9', 'EAD1DC',
        'EA9999', 'F9CB9C', 'FFE599', 'B6D7A8', 'A2C4C9', '9FC5E8', 'B4A7D6', 'D5A6BD',
        'E06666', 'F6B26B', 'FFD966', '93C47D', '76A5AF', '6FA8DC', '8E7CC3', 'C27BAD',
        'CC0000', 'E69138', 'F1C232', '6AA84F', '45818E', '3D85C6', '674EA7', 'A64D79',
        '990000', 'B45F06', 'BF9000', '38761D', '134F5C', '0B5394', '351C75', '741B47',
        '660000', '783F04', '7F6000', '274E13', '0C343D', '073763', '20124D', '4C1130']
], html;


function initHTML() {
    html = '<div class="{prefixCls}editor-color-panel">' +
        '<a class="{prefixCls}editor-color-remove" ' +
        'href="javascript:void(\'清除\');">' +
        '清除' +
        '</a>';
    for (var i = 0; i < 3; i++) {
        html += '<div class="{prefixCls}editor-color-palette"><table>';
        var c = COLORS[i], l = c.length / 8;
        for (var k = 0; k < l; k++) {
            html += '<tr>';
            for (var j = 0; j < 8; j++) {
                var currentColor = '#' + (c[8 * k + j]);
                html += '<td>';
                html += '<a href="javascript:void(0);" ' +
                    'class="{prefixCls}editor-color-a" ' +
                    'style="background-color:' + currentColor + '"' +
                    '></a>';
                html += '</td>';
            }
            html += '</tr>';
        }
        html += '</table></div>';
    }
    html += '' +
        '<div>' +
        '<a class="{prefixCls}editor-button {prefixCls}editor-color-others ks-inline-block">其他颜色</a>' +
        '</div>' +
        '</div>';
}

initHTML();

var ColorButton = Button.extend({
    initializer: function () {
        var self = this;
        self.on('blur', function () {
            // make select color works
            setTimeout(function () {
                if (self.colorWin) {
                    self.colorWin.hide();
                }
            }, 150);
        });
        self.on('click', function () {
            var checked = self.get('checked');
            if (checked) {
                self._prepare();
            } else {
                if (self.colorWin) {
                    self.colorWin.hide();
                }
            }
        });
    },

    _prepare: function () {
        var self = this,
            editor = self.get('editor'),
            prefixCls = editor.get('prefixCls'),
            colorPanel;

        self.colorWin = new Overlay4E({
            // TODO 变成了 -1??
            elAttrs: {
                tabindex: 0
            },
            elCls: prefixCls + 'editor-popup',
            content: util.substitute(html, {
                prefixCls: prefixCls
            }),
            width: 172,
            zIndex: Editor.baseZIndex(Editor.ZIndexManager.POPUP_MENU)
        }).render();

        var colorWin = self.colorWin;
        colorPanel = colorWin.get('contentEl');
        colorPanel.on('click', self._selectColor, self);
        colorWin.on('hide', function () {
            self.set('checked', false);
        });
        var others = colorPanel.one('.' + prefixCls + 'editor-color-others');
        others.on('click', function (ev) {
            ev.halt();
            colorWin.hide();
            DialogLoader.useDialog(editor, 'color', undefined, self);
        });
        self._prepare = self._show;
        self._show();
    },

    _show: function () {
        var self = this,
            el = self.get('el'),
            colorWin = self.colorWin;
        colorWin.set('align', {
            node: el,
            points: ['bl', 'tl'],
            offset: [0, 2],
            overflow: {
                adjustX: 1,
                adjustY: 1
            }
        });
        colorWin.show();
    },

    _selectColor: function (ev) {
        ev.halt();
        var self = this,
            editor = self.get('editor'),
            prefixCls = editor.get('prefixCls'),
            t = $(ev.target);
        if (t.hasClass(prefixCls + 'editor-color-a')) {
            self.fire('selectColor', {
                color: t.style('background-color')
            });
        } else if (t.hasClass(prefixCls + 'editor-color-remove')) {
            self.fire('selectColor', {
                color: null
            });
        }
    },

    destructor: function () {
        var self = this;
        if (self.colorWin) {
            self.colorWin.destroy();
        }
    }
}, {
    ATTRS: {
        checkable: {
            value: true
        },
        mode: {
            value: Editor.Mode.WYSIWYG_MODE
        }
    }
});

var tpl = '<div class="{icon}"></div>' +
    '<div style="background-color:{defaultColor}"' +
    ' class="{indicator}"></div>';

function runCmd(editor, cmdType, color) {
    setTimeout(function () {
        editor.execCommand(cmdType, color);
    }, 0);
}

ColorButton.init = function (editor, cfg) {
    var prefix = editor.get('prefixCls') + 'editor-toolbar-',
        cmdType = cfg.cmdType,
        defaultColor = cfg.defaultColor,
        tooltip = cfg.tooltip;

    var button = editor.addButton(cmdType, {
        elCls: cmdType + 'Btn',
        content: util.substitute(tpl, {
            defaultColor: defaultColor,
            icon: prefix + 'item ' + prefix + cmdType,
            indicator: prefix + 'color-indicator'
        }),
        mode: Editor.Mode.WYSIWYG_MODE,
        tooltip: '设置' + tooltip
    });

    var arrow = editor.addButton(cmdType + 'Arrow', {
        tooltip: '选择并设置' + tooltip,
        elCls: cmdType + 'ArrowBtn'
    }, ColorButton);

    var indicator = button.get('el').one('.' + prefix + 'color-indicator');

    arrow.on('selectColor', function (e) {
        indicator.css('background-color', e.color || defaultColor);
        runCmd(editor, cmdType, e.color);
    });

    button.on('click', function () {
        runCmd(editor, cmdType, indicator.style('background-color'));
    });
};

module.exports = ColorButton;